﻿define(function (require) {
    var ProjectContainerView = require('views/projectcontainer.view');
    var ContactContainerView = require('views/contactcontainer.view');
    var FeedContainerView = require('views/feedcontainer.view');
    
    function Debug() {
        $('#main-container').css({ top: 30 });
        $('#container').show();
    }

    function put(str) {
        console.log(new Date());
        $('#container').html(str);
        console.log(str);
    }

    function append(str)
    {
        document.getElementById('container').innerHTML += str + "<br/>";
    }

    var count = 3;
    var width = $(document.body).width();
    var r = Math.random();

    var isMoving = false
        , isTouching = false
        , originalPoint = 0
        , scorllStartY = 0
        , endPoint = 0
        , xMoveMin = 30
        , yMoveMin = 30
        , moveDirection = 'x'
        , currentPanel = 1
		, isPaged = false;

    var navigationTitle = {"-1":"","0":"联系人","1":"消息","2":"项目","3":""};
    var panelIdMapper = {"0":"#contact-page","1":"#feed-page","2":"#project-page"};

    function addTransition()
    {
        $('.fit-panel')
            .addClass("add-transition-duration")
            .removeClass("remove-transition-duration");
    }

    function removeTransition()
    {
        $('.fit-panel')
            .addClass("remove-transition-duration")
            .removeClass("add-transition-duration");
    }

    function getTouchPoint() {
        var event;
        if(window.event.touches)
            event = window.event.touches[0];
        else
            event = window.event
        return { 'x': event.pageX, 'y': event.pageY };
    }

    Debug();
    return Backbone.View.extend({
        //... is a list tag.
        el: $('body'),
        events: {
            "touchstart ._page":"touchstart"
            ,"touchmove ._page":"touchmove"
            ,"touchend ._page":"touchend"
//            ,"mousedown ._page":"touchstart"
//            ,"mousemove ._page":"touchmove"
//            ,"mouseup ._page":"touchend"
            ,"swiperight ._page":"swiperight"
            ,"swipeleft ._page":"swipeleft" 
        },
        subViews:[],

        initialize: function () {
            return this;
        },

        renderContactView:function(){
            var contactContainerView = new ContactContainerView();
            $('#contact-page').append(contactContainerView.render().el);
            
            this.subViews[this.subViews.length] = contactContainerView;
            return this;
        },
        renderFeedView:function(){
            var feedContainerView = new FeedContainerView();
            $('#feed-page').append(feedContainerView.render().el);

            this.subViews[this.subViews.length] = feedContainerView;
            return this;
        },
        renderProjectView:function(){
            var projectContainerView = new ProjectContainerView();
            $('#project-page').append(projectContainerView.render().el);
            
            this.subViews[this.subViews.length] = projectContainerView;
            return this;
        },
        
        // Re-render the contents of the todo item.
        render: function () {
            put("render");
            this.renderContactView()
                .renderFeedView()
                .renderProjectView();
                
            return this;
        },
        moveRight:function () {
            if (currentPanel > 0)
                currentPanel--;
            
            var page = $(panelIdMapper[currentPanel]).find('.ui-content').hide();
            $.mobile.changePage(panelIdMapper[currentPanel],{transition:"none", changeHash:false});
            setTimeout(function(){
                page.fadeIn();
            },100);
        },
        moveLeft:function (){
            if (currentPanel < count - 1)
                currentPanel++;
            
            var page = $(panelIdMapper[currentPanel]).find('.ui-content').hide();
            $.mobile.changePage(panelIdMapper[currentPanel],{transition:"none", changeHash:false});
            setTimeout(function(){
                window.scrollTo(0,0);
                page.fadeIn();
            },100);
        },
        touchstart: function () {
            put("beging start move");
            isPaged = false;
            isTouching = true;
            endPoint = originalPoint = getTouchPoint();
        },
        touchmove: function () {
            if(!isTouching) return true;
            put("moving" + Math.random());
            endPoint = getTouchPoint();

             if ((originalPoint.x - endPoint.x) > width / 4) {
                isTouching = false;
                isMoving = false;
                isPaged = true;
                this.moveLeft();
            }
            else if ((endPoint.x - originalPoint.x) > width / 4) {
                isTouching = false;
                isMoving = false;
                isPaged = true;
                this.moveRight();
            }
            
        },
        touchend:function(){
            isTouching = false;
            isMoving = false;

            put("touchend");
        },
        swiperight :function(){
            console.log("swiperight");
            if(isPaged) return;
            isPaged = true;
            this.moveRight();
        },
        swipeleft :function(){
            console.log("swipeleft");
            if(isPaged) return;
            isPaged = true;
            this.moveLeft();
        },
    });
});
